<template>
<div class="wrapper">
  <head title="Prize details"></head>
  <div class="center">
    <image class="pimg" :src="prize.image_url" />
    <text class="pName">{{prize.prize}}</text>
    <text class="pTime">{{prize.create_time|formatDateTime}}</text>
    <div class="line"></div>
    <div>
      <text class="default" v-if="prize.status==1">Successfully received</text>
      <text class="btnDraw" @click="getPrize" v-else>Get it right now</text>
    </div>
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>
<script>
import { update_raffle_address } from "../../mixin/ajax";
import asCore from "../../mixin/core";

const prizeAddress = new BroadcastChannel("prizeAddress");
export default {
  data() {
    return {
      prize: {},
      userId: ""
    };
  },
  created() {
    asCore.getBsessionid(userId => {
      this.userId = userId;
    });
    prizeAddress.onmessage = this.changeAddress;
  },
  
  methods: {
    onLoad(parmar) {
      if (parmar && parmar.param) {
        return false;
      }
      this.prize = JSON.parse(parmar.data);
    },
    changeAddress(msg) {
      this.isLoading = true;
      let address = msg.address;
      +"," + msg.area + "," + msg.city + "," + msg.province+" "+msg.postal_code;
      update_raffle_address(
        { users_id: this.userId, id: this.prize.id, address: address },
        (res, flag) => {
          this.isLoading = false;
          this.toast(res.message);
          if (res.code == 200) {
            this.prize.status = 1;
          }
        }
      );
    },
    getPrize() {
      // this.toast("Get it right now");
      this.push("root:app/user/address/address.js", {
        type: "prize"
      });
    }
  }
};
</script>
<style  scoped>
.wrapper {
  background-color: #f5f5f5;
}
.center {
  width: 702px;
  margin-left: 24px;
  margin-top: 24px;
  background-color: #fff;
  align-items: center;
  padding: 24px;
}
.pimg {
  width: 146px;
  height: 138px;
  border-width: 1px;
  border-color: #dedede;
  border-style: solid;
  margin-bottom: 12px;
}

.pName {
  font-size: 32px;
  color: #1e1e1e;
  line-height: 45px;
}
.pTime {
  font-size: 22px;
  color: #888;
  margin-top: 10px;

  line-height: 30px;
  margin-bottom: 100px;
}
.line {
  width: 624px;
  border-bottom-width: 1px;
  border-bottom-color: #a2a2a2;
  border-bottom-style: dashed;
  margin-bottom: 48px;
}

.btnDraw {
  height: 68px;
  line-height: 68px;
  color: #fff;
  font-size: 34px;
  text-align: center;
  background-color: #303030;
  border-radius: 34px;
  padding: 0 34px;
  margin-bottom: 24px;
}
.btnDraw:active {
  background-color: #000;
}
.default {
  height: 68px;
  line-height: 68px;
  font-size: 34px;
  text-align: center;
  border-radius: 34px;
  padding: 0 34px;
  margin-bottom: 24px;
  background-color: #f1f1f1;
  color: #888888;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
</style>